<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back />
        <h2>担保人信息补充</h2>
      </div>
      <div class="content">
        <div class="plan-desc">
          <div class="plan-name">凯斯-PUMA2254-农用拖拉机(重型)</div>
          <div class="plan-info">
            <span>统一社会恼用代码：<em>83230622M41915Y80</em></span>
          </div>
        </div>
        <a-form class="query-form" :model="queryForm">
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              基本信息
            </div>
            <div class="info-content">
              <a-row>
                <a-col :span="8">
                  <a-form-item label="法定代表人：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="是否存在集团公司：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="经济成分：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="企业决仪组织：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              行业信息
            </div>
            <div class="info-content">
              <a-row>
                <a-col :span="8">
                  <a-form-item label="行业门类：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="行业大类：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="行业中类：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="行业小类：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              送达信息
            </div>
            <div class="info-content">
              <a-row>
                <a-col :span="8">
                  <a-form-item label="实收资本：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="从业人数：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="营业收入：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="资产总额：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              开票信息
            </div>
            <div class="info-content">
              <a-row>
                <a-col :span="8">
                  <a-form-item label="是否一般纳税人：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="开户银行：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="银行账号：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="开票电话：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :span="16">
                  <a-form-item label="开票地址：">
                    <a-input v-model="queryForm.a" placeholder="请输入" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              联系人信息
            </div>
            <div class="info-content user-card-box">
              <div class="user-card xx-2">
                <div class="name">
                  李广军
                  <span>默认联系人</span>
                </div>
                <div class="tel">
                  131 4422 0121
                  <span>法人代表</span>
                </div>
              </div>
              <div class="user-card xx-1">
                <div class="name">
                  李广军
                  <span>默认联系人</span>
                </div>
                <div class="tel">
                  131 4422 0121
                  <span>法人代表</span>
                </div>
              </div>
              <div class="user-card xx-1">
                <div class="name">
                  李广军
                  <span>默认联系人</span>
                </div>
                <div class="tel">
                  131 4422 0121
                  <span>法人代表</span>
                </div>
              </div>
              <div class="user-card xx-1">
                <div class="name">
                  李广军
                  <span>默认联系人</span>
                </div>
                <div class="tel">
                  131 4422 0121
                  <span>法人代表</span>
                </div>
              </div>
              <div class="user-card xx-1">
                <div class="name">
                  李广军
                  <span>默认联系人</span>
                </div>
                <div class="tel">
                  131 4422 0121
                  <span>法人代表</span>
                </div>
              </div>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              实际控制人
            </div>
            <div class="info-content">
              <a-table style="width: 100%; margin: auto" :pagination="false" :dataSource="dataSource" :columns="columns" :scroll="{ y: 150 }" />
              <br />
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              银行账户
            </div>
            <div class="info-content">
              <div class="bank-card-box">
                <div class="bank-card xx-3">
                  <div class="name">黑龙江省鲸力传媒有限公司</div>
                  <div class="num">2564684613513566464651</div>
                  <div class="name-c">中国工商银行</div>
                </div>
                <div class="bank-card xx-4">
                  <div class="name">李广军</div>
                  <div class="num">2564684613513566464651</div>
                  <div class="name-c">中国工商银行</div>
                </div>
              </div>
            </div>
          </div>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import Back from '/@/components/go-back/index.vue';
  const queryForm = ref({
    a: '',
  });
  const dataSource = ref([
    {
      a: 'NJZL-HZ-202411-3791 ',
      b: '农机零售 ',
    },
    {
      a: 'NJZL-HZ-202411-3791 ',
      b: '农机零售 ',
    },
    {
      a: 'NJZL-HZ-202411-3791 ',
      b: '农机零售 ',
    },
    {
      a: 'NJZL-HZ-202411-3791 ',
      b: '农机零售 ',
    },
    {
      a: 'NJZL-HZ-202411-3791 ',
      b: '农机零售 ',
    },
  ]);

  const columns = ref([
    {
      title: '类名',
      key: 'a',
      align: 'center',
      width: '50%',
      dataIndex: 'a',
    },
    {
      title: '操作',
      width: '50%',
      key: 'b',
      align: 'center',
      dataIndex: 'b',
    },
  ]);
</script>
<style scoped lang="less">
  @import url(../rzApply/index.less);
  .app-page {
    display: flex;
    flex-direction: column;
    .top {
      width: 100%;
      margin-bottom: 42rem;
      display: flex;
      align-items: center;
      position: relative;
      h2 {
        width: 100%;
        font-family: Microsoft YaHei;
        font-size: 30rem;
        color: #000000;
        margin-bottom: 0;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
      }
    }
    .content {
      .user-card-box {
        display: flex;
        flex-wrap: wrap;
        .xx-1 {
          background-image: url(/@/assets/images/xx-1.png);
        }
        .xx-2 {
          background-image: url(/@/assets/images/xx-2.png);
        }
        .user-card {
          width: 400rem;
          font-family: Microsoft YaHei;
          padding: 20rem;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          box-sizing: border-box;
          margin: 0 20rem 20rem 0;
          &:first-child {
            margin-left: 0;
          }
          .name {
            font-size: 22rem;
            color: #ffffff;
            margin-bottom: 20rem;
            display: flex;
            justify-content: space-between;
            span {
              font-size: 18rem;
              color: #ffffff;
            }
          }
          .tel {
            font-size: 18rem;
            color: #ffffff;
            span {
              margin-left: 14rem;
            }
          }
        }
      }
      /deep/.ant-table-wrapper {
        .ant-table-thead > tr > th {
          background-color: #efefef !important;
        }
      }
      .bank-card-box {
        display: flex;
        flex-wrap: wrap;
        .xx-3 {
          background-image: url(/@/assets/images/xx-3.png);
        }
        .xx-4 {
          background-image: url(/@/assets/images/xx-4.png);
        }
        .bank-card {
          width: 400rem;
          font-family: Microsoft YaHei;
          font-size: 18rem;
          color: #ffffff;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          box-sizing: border-box;
          margin: 0 20rem 20rem 0;
          padding: 14rem;
          &:first-child {
            margin-left: 0;
          }
          .name {
            margin-bottom: 8rem;
          }
          .num {
            margin-bottom: 5rem;
          }
          .name-c {
            text-align: right;
          }
        }
      }
    }
  }
</style>
